<template>
    <el-card shadow="never" class="aui-card--fill">
      <div class="mod-IsAppletPic__isappletpic">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-input
              v-model="dataForm.name"
              placeholder="名称"
              clearable
            ></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button @click="getDataList()">{{ $t("query") }}</el-button>
          </el-form-item>
  
          <el-form-item>
            <el-button
              type="primary"
              @click="addOrUpdateHandle()"
              >{{ $t("add") }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              @click="deleteHandle()"
              >{{ $t("deleteBatch") }}</el-button
            >
          </el-form-item>
          <!-- <el-form-item>
            <el-button
              v-if="$hasPermission('sys:isappletpic:export')"
              type="primary"
              @click="exportHandle()"
              >{{ $t("export") }}</el-button
            >
          </el-form-item> -->
        </el-form>
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          border
          @selection-change="dataListSelectionChangeHandle"
          style="width: 100%"
          :height="he"
        > 
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="validStart"
            label="领取开始时间"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="validEnd"
            label="领取结束时间"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="expireTime"
            label="领取后有效期"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="抵扣金额"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="validPrice"
            label="抵扣起始值"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="typeNames"
            label="品类"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="limitNum"
            label="优惠券限制数量"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            label="优惠券已领数量"
            header-align="center"
            prop="receiveNum"
            align="center">
            <template slot-scope="scope">
              <div @click='handleColumnClick(scope.row,"")'>{{scope.row.receiveNum}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="使用人数"
            header-align="center"
            prop="useNum"
            align="center">
            <template slot-scope="scope">
              <div @click='handleColumnClick(scope.row,1)'>{{scope.row.useNum}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="失效人数"
            header-align="center"
            prop="outNum"
            align="center">
            <template slot-scope="scope">
              <div @click='handleColumnClick(scope.row,2)'>{{scope.row.outNum}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusName"
            label="状态"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            :label="$t('handle')"
            fixed="right"
            header-align="center"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
                <el-button
                    v-if="scope.row.status==0"
                    type="text"
                    size="small"
                    @click="send(scope.row.id,1)"
                    >发券</el-button
                >
                <el-button
                    v-if="scope.row.status==1"
                    type="text"
                    size="small"
                    @click="send(scope.row.id,2)"
                    >下架</el-button
                >
              <el-button
             
                type="text"
                size="small"
                @click="addOrUpdateHandle(scope.row.id)"
                >{{ $t("update") }}</el-button
              >
              <el-button
            
                type="text"
                size="small"
                @click="deleteHandle(scope.row.id)"
                >{{ $t("delete") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        >
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update
          v-if="addOrUpdateVisible"
          ref="addOrUpdate"
          @refreshDataList="getDataList"
          :disabled="disabled"
          :typeList="typeList"
          @changeDisabled="disabled = false"
        ></add-or-update>
      </div>
    </el-card>
  </template>
  
  <script>
  import { getDictDataList } from "@/utils";
  import mixinViewModule from "@/mixins/view-module";
  import AddOrUpdate from "./coupon-add-or-update";
  export default {
    mixins: [mixinViewModule],
    data() {
      return {
        he:'auto',
        disabled: false,
        mixinViewModuleOptions: {
          getDataListURL: "/sys/discountCoupon/page",
          getDataListIsPage: true,
          exportURL: "/sys/isappletpic/export",
          deleteURL: "/sys/discountCoupon",
          deleteIsBatch: true,
        },
        dataForm: {},
        contentTypes: getDictDataList("applet_content_type"),
        typeList:[]
      };
    },
    watch: {
       dataList(newval, oldval) {
        if (newval != oldval) {
          this.he = "auto";
          setTimeout(() => {
            this.he = "calc(100vh - 270px)";
          }, 500);
        }
      },
    },
    components: {
      AddOrUpdate,
    },
    mounted(){
        this.getList()
    },
    methods: {
      handleColumnClick(obj,type){
        console.log(obj)
        
        this.$router.push({ name: 'couponUseList', params: { id:  obj.id,type: type} });
      },
      viewHandle(row) {
        this.addOrUpdateVisible = true;
        this.disabled = true;
        this.$nextTick(() => {
          // this.$refs.addOrUpdate.visible = true;
          this.addOrUpdateVisible = true;
  
          this.$refs.addOrUpdate.dataForm.id = row.id;
          this.$refs.addOrUpdate.dataForm.details = true;
          this.$refs.addOrUpdate.init();
        });
      },
      send(id,status){
        this.$http
        .put(
            "/sys/discountCoupon",
           {id:id,status:status}
        )
            .then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg);
            }
            this.getDataList()
            })
            .catch(() => {});
      },
      getList(){
        this.$http
          .get("/sys/discountCoupon/typeIds")
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.typeList = res.data
            // if(this.dataForm.startDate && this.dataForm.endDate){
            //   this.value1 = [this.dataForm.startDate, this.dataForm.endDate];
            // }else{
            //   this.value1 = ""
            // }
            
            console.log(this.value1)
          })
          .catch(() => {});
      }
    },
  };
  </script>
  